﻿@{
    ViewBag.Title = "EditSlider";
}
@model MvcApplication.Entity.DisplayInfo
<section data-am-widget="accordion" class="am-accordion am-accordion-gapped" data-am-accordion='{  }'>
            <dl class="am-accordion-item am-active" ms-controller="slider">
                <dt class="am-accordion-title">添加幻灯片</dt>
                <dd class="am-accordion-bd am-collapse am-in">
                    <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
                    <div class="am-accordion-content">
                        <form class="am-form">
                            <div class="am-form-group am-form-icon am-form-feedback">
                                <label class="am-form-label">显示标题</label>
                                <input type="text" class="" ms-duplex="slider.Title">
                                @*<span class="am-icon-check"></span>*@
                            </div>
                            <div class="am-form-group">
                                <label class="am-form-label">链接地址</label>
                                <input type="text" class="am-form-field" ms-duplex="slider.LinkURL">
                            </div>
                            <div class="am-form-group" style="height: 40px;">
                                <div class="am-u-sm-5 am-form-file" style="padding: 0;">
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i>&nbsp;选择幻灯片图片
                                    </button>
                                    <input id="coverEl" type="file" onchange="upload_file(this)" />
                                </div>
                            </div>
                            <div class="am-form-group" style="height: 30px;">
                                <a ms-if="slider.FirstPicture != null" 
                                    ms-attr-href="'/image?path='+slider.FirstPicture" 
                                    target="_blank">查看图片</a>
                                <a href="###" ms-click="edit_first_pictrue" 
                                    ms-if="slider.FirstPicture != null">编辑图片</a>
                            </div>
                            <div style="text-align: right">
                                <button type="button" class="am-btn am-btn-primary" ms-click="save_slider">保存</button>
                            </div>
                        </form>
                    </div>
                </dd>
            </dl>
        </section>
<input type="hidden" id="model" value="@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))"/>
@section scripts{
    @Scripts.Render("~/Content/js/common/file-upload.js")
    <script>
        var model = avalon.define({
            $id: 'slider',
            slider: JSON.parse($('#model').val()),
            show_first_pictrue: function () {
                $('#first_picture_preview').modal('show');
            },
            on_picture_edit_callback: function (new_path) {
                this.slider.FirstPicture = new_path;
                layer.closeAll();
            },
            edit_first_pictrue: function () {
                model.open_window_to_eidt_first_picture();
            },
            open_window_to_eidt_first_picture: function () {
                var index = layer.open({
                    type: 2,
                    content: '/image/edit?path=' + this.slider.FirstPicture,
                    area: ['100%', '100%'],
                    maxmin: true
                });
                layer.full(index);
            },
            save_slider: function () {
                $.post('/site/saveslider', model.slider).success(model.on_save_slider_success);
            },
            on_save_slider_success: function () {
                location.href = '/site/slider';
            },
            replace_slider_first_image: function (el) {
                model.for_edit_slider = el;
                var upload_param = { url: '/image', fieldName: 'fileData' }
                new FileUpload(upload_param, file.files[0]).upload(model.file_upload_success);
            },
            on_replace_first_image_upload_success: function (res) {
                model.for_edit_slider.FirstPicture = res.Path;
            }
        });

        model.file_upload_success = function (res) {
            model.slider.FirstPicture = res.Path;
            model.open_window_to_eidt_first_picture();
        }

        function upload_file(file) {
            var upload_param = { url: '/image', fieldName: 'fileData' }
            new FileUpload(upload_param, file.files[0]).upload(model.file_upload_success);
        }

        function on_picture_edit_callback(new_path) {
            model.on_picture_edit_callback(new_path);
        }
    </script>
}
